<script setup>
const props = defineProps({
	timelineData: {
		// 时间轴数据
		type: Array,
		required: true,
		default: () => {
			return []
		}
	},
	activeValue: {
		// 初始选中年份
		type: Number,
		default: 2020
	}
})
</script>

<template>
	<div class="m-timeline-wrap">
		<div class="m-time-dot">
			<div :class="['m-dot-box', { active: activeValue === item.value && activeValue != 5 }]" v-for="(item, index) in timelineData" :key="index">
				<div class="u-status">{{ item.label }}</div>
				<div class="dashed"></div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.m-timeline-wrap {
	width: 1000px;
	background: #f4f4f4;
	padding: 10px;
	.m-time-dot {
		display: flex;
		.m-dot-box {
			text-align: center;
			display: flex;
			align-items: center;
			.u-status {
				width: 150px;
				line-height: 42px;
				font-size: 14px;
				color: $xtxColor;
				margin: 0 10px;
			}
			.dashed {
				width: 30px;
				height: 2px;
				border-bottom: 1px dashed $xtxColor;
			}
		}
		.m-dot-box:last-of-type {
			.dashed {
				display: none;
			}
		}
		.active {
			.u-status {
				color: #fff;
				background-color: $xtxColor;
			}
			.dashed {
				display: none;
			}
		}
		.active ~ .m-dot-box {
			.u-status {
				color: #999;
			}
			.dashed {
				display: none;
			}
		}
	}
}
</style>